<!--车辆管理页-->
<template>
<div style="height: 6vh;background-color: #fff;padding: 10px 20px">
  <span style="line-height: 60px;font-size:20px">车辆管理</span>
  <el-button type="primary" style="float: right;margin-top:13px;"
             @click="beforeAddVehicle">新建车辆</el-button>
</div>
<!--新增车辆弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
  style="width: 1000px;padding: 40px" :before-close="handleClose">
    <el-form label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆品牌">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆牌号">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.license"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆型号">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.model"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆识别码">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量">
           <el-select placeholder="请选择" v-model="saveVehicleForm.displacement">
               <el-option label="1.6" value="1"></el-option>
               <el-option label="2.5" value="2"></el-option>
               <el-option label="4" value="3"></el-option>
           </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆类型">
            <el-select placeholder="请选择" v-model="saveVehicleForm.type">
              <el-option label="轿车" value="10"></el-option>
              <el-option label="货车" value="20"></el-option>
              <el-option label="客车" value="30"></el-option>
              <el-option label="挂车" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆颜色" >
            <el-select placeholder="请选择" v-model="saveVehicleForm.color">
            <el-option label="黑" value="10"></el-option>
            <el-option label="白" value="20"></el-option>
            <el-option label="蓝" value="30"></el-option>
            <el-option label="灰" value="40"></el-option>
            <el-option label="银" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程数">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.kilometers"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker type="date" format="YYYY-MM-DD"
                            v-model="saveVehicleForm.buyTime"
            @change="validateDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上牌时间">
            <el-date-picker type="date" format="YYYY-MM-DD" v-model="saveVehicleForm.regTime"
                            @change="validateDate"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电池类型">
            <el-select placeholder="请选择" v-model="saveVehicleForm.batteryType">
              <el-option label="铅酸蓄电池" value="10"></el-option>
              <el-option label="镍氢电池" value="20"></el-option>
              <el-option label="钠硫电池" value="30"></el-option>
              <el-option label="⼆次锂电池" value="40"></el-option>
              <el-option label="空⽓电池" value="50"></el-option>
              <el-option label="三元锂电池" value="60"></el-option>
              <el-option label="碱性燃料电池" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
     <el-button @click="handleClose">取消</el-button>
     <el-button type="primary" @click="saveVehicle">确定</el-button>
    </template>
  </el-dialog>
<!-- 车辆搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车辆品牌" >
        <el-input placeholder="请输入内容" style="width: 220px"
                  v-model="searchVehicleForm.brand" @keydown.enter="loadVehicle"></el-input>
      </el-form-item>
      <el-form-item label="车辆号" style="width: 290px">
        <el-input placeholder="请输入内容" style="width: 220px"
                  v-model="searchVehicleForm.license" @keydown.enter="loadVehicle"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadVehicle">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

<!--车辆列表-->
  <el-card>
    <el-table :data="vehicleArr">
      <el-table-column label="编号" type="index" width="80" align="center" ></el-table-column>
      <el-table-column label="车辆品牌" prop="brand" align="center" ></el-table-column>
      <el-table-column label="车辆号" prop="license" align="center" ></el-table-column>
      <el-table-column label="车辆识别码" prop="code" align="center" ></el-table-column>
      <el-table-column label="车辆类型" prop="type" align="center"
                       :formatter="vehicleTypeFormatter"></el-table-column>
      <el-table-column label="购买价格" prop="price" align="center" ></el-table-column>
      <el-table-column label="购买时间" prop="buyTime" align="center" ></el-table-column>
      <el-table-column label="上牌时间" prop="regTime" align="center" ></el-table-column>
      <el-table-column label="电池类型" prop="batteryType" align="center"
                       :formatter="vehicleBatteryFormatter"></el-table-column>
      <el-table-column label="车辆状态" prop="status" align="center"
                       :formatter="vehicleStatusFormatter"></el-table-column>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteVehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
const dialogTitle=ref('新增车辆')
const dialogVisible = ref(false);
// 定义对象用来保存搜索条件 品牌 车牌号
const searchVehicleForm = ref({brand:'',license:''})
// 定义数组用来保存车辆数据
const vehicleArr = ref([]);
// 定义加载数据的方法
const loadVehicle=()=>{
   let data = qs.stringify(searchVehicleForm.value)
   axios.get(BASE_URL+'/v1/vehicle/select?'+data)
       .then((response)=>{
         if(response.data.code==2000){
           vehicleArr.value=response.data.data;
         }else{
           ElMessage.error(response.data.msg)
         }
       })
}
// 页面加载完毕，立即调用加载车辆的方法
onMounted(()=>{
  loadVehicle();
})
// 定义重置按钮上的方法
const resetSearch=()=>{
  loadVehicle();
}
// 定义一个车辆类型转换的方法
const vehicleTypeFormatter=(row,column,cellValue,index)=>{
  if(cellValue == 10){
    cellValue='轿车';
  }else if(cellValue == 20){
    cellValue='货车';
  }else if(cellValue == 30){
    cellValue='客车';
  }else if(cellValue == 40){
    cellValue='挂车';
  }
  return cellValue;
}

// 定义一个电池类型转换的方法
const vehicleBatteryFormatter=(row,column,cellValue,index)=>{
  if(cellValue == 10){
    cellValue='铅酸蓄电池';
  }else if(cellValue == 20){
    cellValue='镍氢电池';
  }else if(cellValue == 30){
    cellValue='钠硫电池';
  }else if(cellValue == 40){
    cellValue='⼆次锂电池';
  }else if(cellValue == 50){
    cellValue='空⽓电池';
  }else if(cellValue == 60){
    cellValue='三元锂电池';
  }else if(cellValue == 70){
    cellValue='碱性燃料电池';
  }
  return cellValue;
}
// 定义一个车辆状态转换的方法
const vehicleStatusFormatter=(row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue='空闲';
  }else if(cellValue == 2){
    cellValue='占用';
  }else if(cellValue == 3) {
    cellValue = '维修';
  }
  return cellValue;
}

// 定义处理弹窗关闭的方法
const handleClose=()=>{
  if(confirm('您确认要关闭本弹窗吗？')){
    dialogVisible.value=false;
  }
}

// 定义对象用来保存车辆表单数据
const saveVehicleForm = ref({
  brand:'',
  license:'',
  model:'',
  code:'',
  displacement:'',
  type:'',
  color:'',
  kilometers:'',
  buyTime:'',
  regTime:'',
  price:'',
  batteryType:''
})
// 定义保存车辆的方法
const saveVehicle=()=>{
  // 将收集到的表单数据转为查询字符串格式
  let data = qs.stringify(saveVehicleForm.value);
  // console.log(data);
  // 给后端发新增这辆请求
  axios.post(BASE_URL+'/v1/vehicle/save',data)
      .then((response)=>{
        if(response.data.code===2000){
          ElMessage.success('保存成功！');
          // 成功后：清空表单数据+关弹窗+重新加载所有车辆数据
          saveVehicleForm.value={};
          loadVehicle();
          dialogVisible.value=false;
        }else{
          ElMessage.error('车牌号或车辆识别码不允许重复！');
        }
      })
}

// 定义校验上牌时间与购买时间的先后顺序
const validateDate=()=>{
  const buyTime = saveVehicleForm.value.buyTime;
  const regTime = saveVehicleForm.value.regTime;
  if(regTime && buyTime && new Date(regTime)<=new Date(buyTime)){
    ElMessage.error('上牌时间不能早于购买时间');
    saveVehicleForm.value.regTime='';
  }

}

const editVehicle=(id)=>{
  // 显示弹窗并修改标题
  dialogVisible.value=true;
  dialogTitle.value='编辑车辆';
//   根据当前车辆的id回显待编辑车辆的数据
  axios.get(BASE_URL+'/v1/vehicle/select?id='+id)
      .then((response)=>{
        if(response.data.code===2000){
          saveVehicleForm.value=response.data.data[0];
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//
const beforeAddVehicle=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新建车辆';
  saveVehicleForm.value={};
}
// 删除车辆
const deleteVehicle=(id)=>{
  if(confirm("您确认要删除该车辆嘛？")){
    axios.post(BASE_URL+'/v1/vehicle/delete?id='+id)
        .then((response)=>{
          if(response.data.code===2000){
            ElMessage.success('删除成功！');
            loadVehicle();
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }
}


</script>

<style scoped>

</style>